<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #content {
            height: 800px;
            background: #ccc;
        }
        
        img {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="content"></div>
    <script>
        var content = document.getElementById("content");
        content.ondragover = function(ev) {
            ev.preventDelFault();
            // ev.preventDefault()阻止与事件相关的默认行为
            // dataTransfer对象是对象事件的是一个属性 只能放在拖放事件过程中访问
            // console.log(ev.dataTransfer.filse);
            // filse文件读取
            // 获取拖放文件 得到数组 去的地一个文件
            var msg = ev.dataTransfer.flies[0];
            consloe.log(msg);
            // 创建文件输入流
            var read = new FileReader()
            read.readAsDataURL(msg);
            read.onload = function() {
                var img = document.createElement("img");
                img.src = this.result;
                content.appendChild(img);
            }
        }
    </script>
</body>

</html>